window.onload = () => {
  let banner = document.querySelector('.banner')
  let ul = document.querySelector('.banner  ul')
  let lis = document.querySelectorAll('.carousel  li')
  let spans = document.querySelector('.banner .spans')
  let btnl = document.querySelectorAll(' .banner .btns a')[0]
  let btnr = document.querySelectorAll(' .banner .btns a')[1]
  let index = 0
  let timer = null
  let imgWidth = lis[0].offsetWidth
  startUpTimer()

  function startUpTimer() {
    timer = setInterval(() => {
      index++
      if (index == lis.length) {
        index = 0
      }
      ul.style.left = -index * imgWidth + 'px'
      addActive()
    }, 2000)
  }

  // 添加span
  lis.forEach(() => {
    spans.innerHTML += '<span></span>'
  })
  // 给导航点添加相应的类名
  function addActive() {
    let allSpan = document.querySelectorAll('.spans span')
    allSpan.forEach((span) => {
      span.className = ''
    })
    // 给当前导航点加类名
    allSpan[index].className = 'active'
  }

  btnl.onclick = rightScroll
  // 往右滚动
  function rightScroll() {
    clearInterval(timer)
    index--
    if (index == -1) {
      index = lis.length - 1
    }
    ul.style.left = -index * imgWidth + 'px'
    addActive()
    startUpTimer()
  }

  btnr.onclick = leftScroll
  // 往左滚动
  function leftScroll() {
    clearInterval(timer)
    index++
    if (index == lis.length) {
      index = 0
    }
    ul.style.left = -index * imgWidth + 'px'
    addActive()
    startUpTimer()
  }
  let allSpan = document.querySelectorAll('.spans span')
  // 点击导航点轮播图切换
  allSpan.forEach((span, i) => {
    span.onclick = function () {
      clearInterval(timer)
      index = i
      ul.style.left = -index * imgWidth + 'px'
      addActive()
      startUpTimer()
    }
  })

  //定义变量，用于记录坐标和角度
  let startx, movex, endx, nx
  //开始触摸函数，event为触摸对象
  function touchs(event) {
    event.preventDefault() //阻止浏览器默认滚动事件
    if (event.type == 'touchstart') {
      //通过if语句判断event.type执行了哪个触摸事件
      let touch = event.touches[0] //获取开始的位置数组的第一个触摸位置
      startx = Math.floor(touch.pageX) //获取第一个坐标的X轴
    } else if (event.type == 'touchmove') {
      //触摸中的坐标获取
      let touch = event.touches[0]
      movex = Math.floor(touch.pageX)
    } else if (event.type == 'touchend' || event.type == 'touchcancel') {
      //当手指离开屏幕或系统取消触摸事件的时候
      endx = Math.floor(event.changedTouches[0].pageX) //获取最后的坐标位置
      // console.log("‘结束‘");
      nx = endx - startx //获取开始位置和离开位置的距离
      //判断滑动方向
      if (nx <= -10) {
        leftScroll()
        return false
      }
      if (nx >= 10) {
        rightScroll()
        return false
      }
    }
  }
  let box = document.getElementById('box') //获取DOM标签
  //添加触摸事件的监听，并直行自定义触摸函数
  ul.addEventListener('touchstart', touchs, false)
  ul.addEventListener('touchmove', touchs, false)
  ul.addEventListener('touchend', touchs, false)
}
